<template>
    <h2>学生管理</h2>
    <hr />
    <div class="wrap">
        <div class="left-column">
            <div class="header-bar">
                <div class="search-box">
                    <input type="text" />
                </div>
                <div class="font-size-switcher">
                    文字大小：<span
                        style="font-size: 12px"
                        @click="changeFontSize('12px')"
                        >小号</span
                    >
                    <span
                        style="font-size: 16px"
                        @click="changeFontSize('16px')"
                        >中号</span
                    >
                    <span
                        style="font-size: 24px"
                        @click="changeFontSize('24px')"
                        >大号</span
                    >
                </div>
            </div>

            <table class="students" :style="{ fontSize: tableFontSize }">
                <tr>
                    <th>序号</th>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>班级</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
                <tr
                    v-for="(student, index) in students"
                    :class="{
                        male: student.gender == '男',
                        female: student.gender == '女',
                    }"
                >
                    <td>{{ index + 1 }}</td>
                    <td>{{ student.studentNo }}</td>
                    <td>
                        <RouterLink :to="'/students/' + student.studentNo">{{
                            student.name
                        }}</RouterLink>
                    </td>
                    <td>{{ student.class }}</td>
                    <td>{{ student.gender }}</td>
                    <td>
                        <a
                            class="button modify"
                            href="#"
                            @click.prevent="showEditStudent(index)"
                            >编辑</a
                        >
                        <a
                            class="button delete"
                            href="#"
                            @click.prevent="deleteStudent(index)"
                            >删除</a
                        >
                    </td>
                </tr>
            </table>
            <div>
                共有{{ stats.total }}名学生，其中男生{{ stats.male }}名，女生{{
                    stats.female
                }}名。
            </div>
            <div>
                <button @click="deleteLastStudent">删除最后一名学生</button>
            </div>
        </div>

        <div class="right-column">
            <h2>{{ formTitle }}</h2>
            <form action="" @submit.prevent>
                <div>
                    <label for="">学号：</label>
                    <input
                        type="text"
                        v-model="newStudent.studentNo"
                        :disabled="formMode == 'edit'"
                    />
                </div>
                <div>
                    <label for="">姓名：</label>
                    <input type="text" v-model="newStudent.name" />
                </div>
                <div>
                    <label for="">班级：</label>
                    <select v-model="newStudent.class">
                        <option value="软件181">软件181</option>
                        <option value="软件182">软件182</option>
                        <option value="软件183">软件183</option>
                    </select>
                </div>
                <!-- <div><label for="">专业：</label><input type="text"></div> -->
                <div>
                    <label for="">性别：</label>
                    <input
                        type="radio"
                        name="gender"
                        value="男"
                        v-model="newStudent.gender"
                    />
                    男
                    <input
                        type="radio"
                        name="gender"
                        value="女"
                        v-model="newStudent.gender"
                    />
                    女
                </div>
                <div>
                    <button @click="saveStudent">保存</button>
                    <button @click="resetForm">取消</button>
                </div>
            </form>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import axios from "axios";

const students = ref([]);
const formMode = ref("add");
var editIndex = null;
const newStudent = ref({
    studentNo: "",
    name: "",
    class: "",
    gender: "",
    subject: "",
});
const tableFontSize = ref("16px");

const stats = computed(() => {
    var mStudents = students.value.filter((s) => s.gender == "男");
    return {
        total: students.value.length,
        male: mStudents.length,
        female: students.value.length - mStudents.length,
    };
});

const formTitle = computed(() => {
    return formMode.value == "edit" ? "修改学生信息" : "添加学生";
});

onMounted(() => {
    axios.get("api/students.json").then((res) => {
        students.value = res.data;
    });
});

function deleteLastStudent() {
    students.value.pop();
}

function deleteStudent(index) {
    students.value.splice(index, 1);
}

function showEditStudent(index) {
    formMode.value = "edit";
    editIndex = index;
    var student = students.value[index];
    newStudent.value.studentNo = student.studentNo;
    newStudent.value.name = student.name;
    newStudent.value.class = student.class;
    newStudent.value.gender = student.gender;
}

function saveStudent() {
    console.log(newStudent.value);
    let newStudentCopy = JSON.parse(JSON.stringify(newStudent.value));
    if (formMode.value == "add") {
        students.value.push(newStudentCopy);
    } else {
        students.value[editIndex] = newStudentCopy;
    }
    resetForm();
}

function resetForm() {
    newStudent.value.studentNo = "";
    newStudent.value.name = "";
    newStudent.value.class = "";
    newStudent.value.gender = "";
    formMode.value = "add";
    editIndex = null;
}

function changeFontSize(fontSize) {
    tableFontSize.value = fontSize;
}
</script>

<style lang="scss">
hr {
    border: none;
    border-top: 1px solid #ccc;
}
.wrap {
    display: flex;
    .left-column {
        width: 60%;
    }
    .right-column {
        width: 40%;
    }
}
table.students {
    width: 98%;
    padding: 5px 1%;
    border-collapse: collapse;
    th {
        background-color: darkslategray;
        color: white;
        padding: 8px 6px;
        font-weight: normal;
        border: 1px solid white;
        border-top: 1px solid darkslategray;
        &:first-child {
            border-left: 1px solid darkslategray;
        }
        &:last-child {
            border-right: 1px solid darkslategray;
        }
    }
    td {
        padding: 6px;
        border: 1px solid #ccc;
    }
    tr.male {
        background-color: gainsboro;
    }
    tr.female {
        background-color: thistle;
    }
    a.button {
        font-size: 0.8em;
        padding: 0 6px;
        text-decoration: none;
        &:hover {
            color: orangered;
        }
    }
    a.modify {
        color: darkblue;
    }
    a.delete {
        color: darkred;
    }
}
.header-bar {
    display: flex;
    justify-content: space-between;
    .search-box {
    }
    .font-size-switcher {
        font-size: 12px;
        color: #999;
        display: flex;
        align-items: center;
        & > span {
            display: block;
            margin: 2px 6px;
            cursor: pointer;
            color: #666;
            &:hover {
                color: cornflowerblue;
            }
        }
    }
}
</style>
